﻿//* scss-compile-options: :style => :compressed

$AccentOrange:   #f26522;	// Altairis orange
$AccentOrange50: #f7a67f;	// Altairis orange - 50% intensity
$AccentOrange25: #fde8de;	// Altairis orange - 25% intensity
$AccentGreen:    #357d18;	// Altairis green
$AccentGreen50:  #a8c79b;	// Altairis green - 50% intensity
$AccentGreen25:  #d3e2cc;	// Altairis green - 25% intensity
$NavWidth:		 200px;		// Width of left menu
$Padding:		 20px;		// General padding

html {
	background-color: $AccentOrange;
	color: #000;
	font: { family: Trebuchet MS, Arial, Helvetica, sans-serif; size: .9em; }
	margin: 0;
	padding: 0 $Padding * 1.5;
}
body {
	background-color: #fff;
	margin: 0 auto;
	max-width: 1200px;
}

// Corporate header
form > header {
	display: block;
	height: 100px;
	background: { color: $AccentGreen; image: url(Images/HeadingBackground.png); position: center top; repeat: repeat-x; }

	hgroup {
		display: block;
		padding: 15px 0;
		background: { image: url(Images/HeadingForeground.png); position: right bottom; repeat: no-repeat;}
	}
	h1 {
		display: inline-block;
		height: 70px;
		line-height: 70px;
		margin: 0;
		padding: 0 35px 0 185px;
		background: { color: #fff; image: url(Images/HeadingLogo.png); position: left center; repeat: no-repeat; }
		border-radius: 0 $Padding $Padding 0;
		color: $AccentGreen;
		font: { size: 250%; weight: normal; }
	}
}

// Corporate footer
form > footer {
	display: block;
	clear: both;
	margin-top: $Padding;

	ul {
		text-align: center;
		margin: 0 100px;
		padding: .3ex 0;
		border-radius: $Padding/2 $Padding/2 0 0;
		background-color: $AccentOrange50;
		font-size: 80%;
		color: darken($AccentOrange, 25);
		li {
			list-style-type: none;
			margin: 0;
			padding: 0;
			display: inline;
			&:after{ content: ' |'}
			&:nth-last-child(1):after { content: none; }
		}
	}
	a:link { color: darken($AccentOrange, 25); }
	a:visited { color: darken($AccentOrange, 15);}
	a:hover { color: $AccentGreen; }
}

// Navigation
form > nav {
	display: block;
	width: $NavWidth - $Padding;
	margin-left: $Padding;
	border-radius: 0 0 $Padding/2 $Padding/2;
	background-color: $AccentGreen50;
	float: left;

	& > ul > li:nth-child(1) {
		border: none;
	}
	& > ul > li:nth-last-child(1) a {
		border-radius: 0 0 $Padding/2 $Padding/2;
	}
	ul {
		margin: 0;
		padding: 0;
		li {
			margin: 0;
			padding: 0;
			list-style-type: none;
			border-top: 1px solid $AccentGreen25;
			a {
				font-size: 90%;
				text-decoration: none;
				display: block;
				line-height: 175%;
				padding: 0 $Padding/2;
			}
			li a {
				padding-left: $Padding;
			}
		}
	}
	a {
		&:link { color: #000; }
		&:visited { color: #010;}
		&:hover { color: #fff; background-color: $AccentOrange;}
	}
}

// Main content
article {
	display: block;
	padding: $Padding;
	margin-left: $NavWidth;

	blockquote {
		background-color: $AccentGreen25;
		color: $AccentGreen;
		margin: 1em 0;
		padding: 1px 1em;
		border-radius: $Padding/2;
	}
	ul li {
		list-style-image: url(Images/BulletOrange.png);
		li {
			list-style-image: url(Images/BulletGreen.png);
			li {
				list-style-image: url(Images/BulletOrange.png);
			}
		}
	}
}

// Common HTML constructs
code, .code {
	font-family: Consolas, Lucida Unicode, Courier New, monospace;
	font-size: 100%;
}
@for $i from 1 through 4 {
	h#{$i} {
		@if $i==1 { 
			margin-top: 0; 
			padding-bottom: .25ex;
			color: $AccentOrange;
		} @else {
			color: $AccentGreen;
		}
		font: { 
			weight: normal; 
			size: 100% + (4.5 - $i) * 30; 
		}
		a { text-decoration: none; }
	}
}
a {
	&:link { color: $AccentGreen; }
	&:visited { color: darken($AccentGreen, 25); }
	&:hover { color: $AccentOrange; }
}
.l { text-align: left; }
.r { text-align: right; }
.c { text-align: center; }

// Forms
.form {
	p {
		background-color: $AccentGreen25; 
		margin: 0 0 1ex 0;
		padding: 1ex;
		color: $AccentGreen;
		border: 2px solid $AccentGreen50;
		border-radius: $Padding/4;
	}
	.buttons { 
		background-color: $AccentOrange25; 
		color: $AccentOrange;
		margin: 0 0 1ex 0;
		padding: 1ex;
		border: 2px solid $AccentOrange50;
		border-radius: $Padding/4;
	}
	.textbox {  
		box-sizing: border-box;
		background-color: lighten($AccentGreen25, 10);
		padding: .5ex;
		font: { family: Trebuchet MS, Arial, Helvetica, sans-serif; size: 100%; }
		border: none;
		width: 100%;
		border-radius: $Padding/4;
	}
	.button {
		box-sizing: border-box;
		background-color: $AccentOrange;
		border: 2px solid $AccentOrange50;
		border-radius: $Padding/4;
		padding: .75ex 3ex;
		color: $AccentOrange25;
		font: { family: Trebuchet MS, Arial, Helvetica, sans-serif; weight: bold; size: 100%; }
	}
}

// Grid
table.grid {
	border: none;
	border-collapse: collapse;
	width: 100%;
	border-radius: $Padding/4;

	td, th {
		border: 2px solid #fff;
		padding: .5ex .75ex;
	}
	thead {
		tr {
			&:nth-child(1) th:nth-child(1), &:nth-child(1) td:nth-child(1) { border-top-left-radius: $Padding/4; }
			&:nth-child(1) th:nth-last-child(1), &:nth-child(1) td:nth-last-child(1) { border-top-right-radius: $Padding/4; }
		}
		th {
			background-color: $AccentOrange25;
			text-align: left;
			color: $AccentOrange;
		}
	}
	tbody tr {
		background-color: lighten($AccentGreen25, 5);

		&:nth-last-child(1) th:nth-child(1), &:nth-last-child(1) td:nth-child(1) { border-bottom-left-radius: $Padding/4; }
		&:nth-last-child(1) th:nth-last-child(1), &:nth-last-child(1) td:nth-last-child(1) { border-bottom-right-radius: $Padding/4; }
		&:nth-child(even) { background-color: lighten($AccentGreen25, 10); }
		&:hover { background-color: $AccentGreen25; }
		th {
			background-color: $AccentGreen25;
			text-align: left;
		}
	}
}